<template>
<div id="header"
  :class="{animate__animated: currentRoute == '/'}"
  class="animate__fadeInDownBig">
  <b-container>
    <b-navbar toggleable="lg" variant="faded" type="light">
      <b-navbar-brand>
        <b-img width="120" src="~images/logo.png"></b-img>
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        
        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <template
            v-for="(nav, index) in navs"
          >
            <b-navbar-nav v-if="!nav.children" :key="index">
              <b-nav-item @click="goto(nav.href)">{{nav.title}}</b-nav-item>
            </b-navbar-nav>

            <b-nav-item-dropdown 
              v-else :text="nav.title" right :key="index">
              <b-dropdown-item 
                v-for="(child, cIndex) in nav.children" 
                :key="cIndex"
                @click="goto(child.href)"
              >
                {{child.title}}
              </b-dropdown-item>
            </b-nav-item-dropdown>
          </template>
        </b-navbar-nav>
      </b-collapse>

    </b-navbar>
  </b-container>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "GHeader",
  methods: {
    goto (type) {
      this.$router.push(type)
    }
  },
  data () {
    return {
      currentRoute: '',
      show: false
    }
  },
  created () {
    this.currentRoute = this.$route.path
  },
  computed: {
    ...mapState(['navs'])
  },
  watch: {
    '$route.path' (newval) {
      this.currentRoute = newval
    }
  }
};
</script>

<style></style>
